var document = this.document

const types = {
  type: "LIGHT_BLUE_XJ_CHAT_FRAME",
  icon: "icon-widget-list-viewer",
  title: "聊天框-轻蓝",
  version: '1.0.0',
  author: 'XJ王大哥(2357942846)',
  isInvisibleWidget: false,
  isGlobalWidget: false,
  docs: {url: 'https://lightblue.apifox.cn'},
  properties: [
    {
      key: '__width',
      label: '宽度',
      valueType: 'number',
      defaultValue: 360,
    },
    {
      key: '__height',
      label: '高度',
      valueType: 'number',
      defaultValue: 640,
    },
    {
      key: 'realWidth',
      label: '实际宽度',
      valueType: 'number',
      defaultValue: 360,
    },
    {
      key: 'realHeight',
      label: '实际高度',
      valueType: 'number',
      defaultValue: 640,
    },
    {
      key: 'htmls',
      label: '数据',
      valueType: ['string', 'number', 'boolean', 'array', 'color', 'object',],
      defaultValue: '[]',
    },
    {
      key: 'darkPattern',
      label: '深色模式',
      valueType: 'boolean',
      defaultValue: false,
    },
    {
      key: 'colorDown',
      label: '气泡渐变色·下',
      valueType: 'color',
      defaultValue: 'transparent',
    },
    {
      key: 'colorUp',
      label: '气泡渐变色·上',
      valueType: 'color',
      defaultValue: 'transparent',
    },
    {
      key: 'backgroundColor',
      label: '背景颜色',
      valueType: 'color',
      defaultValue: 'transparent',
    },
    {
      key: 'autoRoll',
      label: '自动滚动',
      valueType: 'boolean',
      defaultValue: true,
    }
  ],
  methods: [
    {
      key: 'concat',
      label: '添加',
      params: [
        {key: 'data',label: '消息列表',valueType: ['string', 'number', 'boolean', 'array', 'color', 'object',],defaultValue:''}
      ],
      blockOptions: {callMethodLabel: false,line: '写入'}
    },
    {
      key: 'push',
      label: '添加',
      params: [
        {key: 'data',label: '单个消息',valueType: ['string', 'number', 'boolean', 'array', 'color', 'object',],defaultValue:''}
      ],
      blockOptions: {callMethodLabel: false}
    },
    {
      key: 'splice',
      label: '插入',
      params: [
        {key: 'start',label: '第',labelAfter: '行后',valueType: 'number',defaultValue: 0},
        {key: 'data',label: '消息',valueType: ['string', 'number', 'boolean', 'array', 'color', 'object',],defaultValue:''}
      ],
      blockOptions: {callMethodLabel: false}
    },
    {
      key: 'pop',
      label: '删除末尾行',
      params: [],
      blockOptions: {callMethodLabel: false}
    },
    {
      key: 'remove',
      label: '删除',
      params: [
        {key: 'start',label: '第',labelAfter: '行',valueType: 'number',defaultValue: 0}
      ],
      blockOptions: {callMethodLabel: false}
    },
    {
      key: 'replace',
      label: '替换',
      params: [
        {key: 'start',label: '第',labelAfter: '行为',valueType: 'number',defaultValue: 0},
        {key: 'data',label: '消息',valueType: ['string', 'number', 'boolean', 'array', 'color', 'object',],defaultValue: ''}
      ],
      blockOptions: {callMethodLabel: false}
    },
    {
      key: 'empty',
      label: '清空',
      params: [],
      blockOptions: {callMethodLabel: false},
    },
    {
      key: 'inquire',
      params: [{key: 'start',label: '第',labelAfter: '行的值',valueType: 'number',defaultValue: 0},],
      valueType: ['string', 'number', 'boolean', 'array', 'color', 'object',],
      blockOptions: {callMethodLabel: false,line: '读取'},
    },
    {
      key: 'length',
      label: '行数',
      params: [],
      valueType: 'number',
      blockOptions: {callMethodLabel: false},
    },
    {
      key: 'parseHtmls',
      label: '可解析数据',
      params: [],
      valueType: ['string', 'number', 'boolean', 'array', 'color', 'object',],
      blockOptions: {callMethodLabel: false},
    },
    {
      key: 'scrollTo',
      label: '滚动至',
      params: [{key:'start',label: '第',labelAfter: '行',valueType: 'number',defaultValue:0}],
      blockOptions: {color: "rgba(0, 175, 195, 1)",callMethodLabel: false,line: '滚动'}
    },
    {
      key: 'scrollToEnd',
      label: '滚动至末尾',
      params: [],
      blockOptions: {color: "rgba(0, 175, 195, 1)",callMethodLabel: false}
    },
    {
      key: 'scrollTopNear',
      label: '可见区域顶端行',
      valueType: 'number',
      params: [],
      blockOptions: {color: "rgba(0, 175, 195, 1)",callMethodLabel: false}
    },
    {
      key: 'scrollBottomNear',
      label: '可见区域底端行',
      valueType: 'number',
      params: [],
      blockOptions: {color: "rgba(0, 175, 195, 1)",callMethodLabel: false}
    },
    {
      key: 'fastRaw',
      label: '快速消息',
      valueType: ['string', 'number', 'boolean', 'array', 'color', 'object',],
      params: [
        {
          key: 'messageType',label: '类型',valueType: 'string',
          dropdown: [
            {label: '纯文本', value: 'text'},
            {label: '富文本', value: 'raw'},
          ],
        },
        {key: 'headIcon',label: '头像',valueType: 'string',defaultValue: ""},
        {key: 'name',label: '昵称',valueType: 'string',defaultValue: ""},
        {key: 'html',label: '内容',valueType: 'string',defaultValue: ""},
        {
          key: 'position',label: '位置',valueType: 'string',
          dropdown: [
            {label: '左', value: 'left'},
            {label: '右', value: 'right'},
          ],
        },
        {
          key: 'htitleType',label: '头衔类型',valueType: 'string',
          dropdown: [
            {label: '无/灰色', value: ' '},
            {label: '蓝色', value: 'admin'},
            {label: '金色', value: 'owner'},
          ],
        },
        {key: 'htitle',label: '头衔',valueType: 'string',defaultValue: ""},
        {key: 'message',label: '备注信息',valueType: ['string', 'number', 'boolean', 'array', 'color', 'object',],defaultValue: ""}
        ],
      blockOptions: {color: "rgb(249, 204, 55)",callMethodLabel: false,line: '快速消息'}
    },
    {
      key: 'fastTips',
      label: '快速提示',
      valueType: ['string', 'number', 'boolean', 'array', 'color', 'object',],
      params: [
        {
          key: 'messageType',label: '类型',valueType: 'string',
          dropdown: [
            {label: '灰色', value: 'tipsNormal'},
            {label: '蓝色', value: 'tipsPrimary'},
            {label: '绿色', value: 'tipsSuccess'},
            {label: '青色', value: 'tipsInfo'},
            {label: '橙色', value: 'tipsWarning'},
            {label: '红色', value: 'tipsDanger'}
          ],
        },
        {key: 'html',label: '内容',valueType: 'string',defaultValue: ""},
        {key: 'message',label: '备注信息',valueType: ['string', 'number', 'boolean', 'array', 'color', 'object',],defaultValue: ""}
      ],
      blockOptions: {space: 40,color: "rgb(249, 204, 55)",callMethodLabel: false}
    },
  ],
  events: [
    {
      key: 'onclick',
      label: '被点击',
      params: [{key: 'number',label: '行',valueType: 'number',}],
    },
    {
      key: 'headIconOnclick',
      label: '头像被点击',
      params: [{key: 'number',label: '行',valueType: 'number',}],
    },
    {
      key: 'nameOnclick',
      label: '昵称被点击',
      params: [{key: 'number',label: '行',valueType: 'number',}],
    },
    {
      key: 'htmlOnclick',
      label: '气泡被点击',
      params: [{key: 'number',label: '行',valueType: 'number',}],
    },
    {
      key: 'tipsOnclick',
      label: '提示被点击',
      params: [{key: 'number',label: '行',valueType: 'number',}],
    },
    {
      key: 'scroll',
      label: '被滚动',
      params: [],
    },
  ],
};

class Widget extends VisibleWidget {
  constructor(props) {
    super(props)
    for (let i in props) this[i] = props[i]
  }
  
  mybeforeRenderingHTML = (e="", empty=false) => {
    const TipsType = {
      tipsNormal: "tips",
      tipsPrimary: "tips-primary",
      tipsSuccess: "tips-success",
      tipsInfo: "tips-info",
      tipsWarning: "tips-warning",
      tipsDanger: "tips-danger"
    },
    TitleType = {
      admin: "admin",
      owner: "owner"
    };
    const that = this

    document.querySelector("#lite-chatbox").addEventListener('scroll',e => that.emit("scroll"))

    function beforeRenderingHTML(e, s) {
      let t = "",
      n = document.querySelector(s);

      for (let s = 0; s < e.length; s++) {
        !e[s].isRender && (-1 !== e[s].messageType.indexOf("tips") ? t += renderTipHtml(e[s].html, TipsType[e[s].messageType] || "tips", s) : t += renderMessageHtml(e[s], s));
      }
      n.innerHTML += t
      if (that.autoRoll){
        setTimeout(() => {
          n.scrollHeight > n.clientHeight && (n.scrollTop = n.scrollHeight, n = "", t = "")
      }, 300)
      }
      for (const i of document.querySelectorAll("#lite-chatbox > div")){
        if (i.getAttribute('class') === 'tips'){
          i.querySelector("span").addEventListener("click", function(event){
            that.emit("tipsOnclick",Number(event.currentTarget.getAttribute('name')) + 1)
            that.emit("onclick",Number(event.currentTarget.getAttribute('name')) + 1)
          })
        }else{
        i.querySelector("img").addEventListener("click", function(event){
          that.emit("headIconOnclick",Number(event.currentTarget.getAttribute('name')) + 1)
          that.emit("onclick",Number(event.currentTarget.getAttribute('name')) + 1)
        })
        i.querySelector("span.name").addEventListener("click", function(event){
          that.emit("nameOnclick",Number(event.currentTarget.getAttribute('name')) + 1)
          that.emit("onclick",Number(event.currentTarget.getAttribute('name')) + 1)
        })
        i.querySelector("span.content").addEventListener("click", function(event){
          that.emit("htmlOnclick",Number(event.currentTarget.getAttribute('name')) + 1)
          that.emit("onclick",Number(event.currentTarget.getAttribute('name')) + 1)
        })
        }
      }

    }
    
    function renderMessageHtml(e, s) {
      return `<div class="c${e.position} cmsg" name=${s}><img name=${s} class="headIcon ${e.diamond?"":"radius"}"src="${e.headIcon}"ondragstart="return false;"oncontextmenu="return false;"/><span name=${s} class="name">${renderTitleHtml(e.htitle,TitleType[e.htitleType]||"")}<span>${escapeHtml(e.name)||"&nbsp;"}</span></span><span name=${s} class="content" ${'colorDown' in e && 'colorUp' in e && 'color' in e ? `style="background: linear-gradient(20deg, ${e.colorDown} 0, ${e.colorUp} 100%);color: ${e.color}"` : ''}>${"raw"===e.messageType?e.html:escapeHtml(e.html)}</span></div>`
    }
    
    function renderTitleHtml(e, s) {
      return e ? `<span class="htitle ${s}"style="margin: 0 4px 0 0;">${e}</span>` : ""
    }
    
    function renderTipHtml(e, s, realS) {
      return e ? `<div class="tips" name=${realS}><span name=${realS} class="${s}"style="margin-bottom: 20px;">${escapeHtml(e)}</span></div>` : ""
    }
    
    function escapeHtml(e) {
      return e.replace(/[\u0000-\u002F\u003A-\u0040\u005B-\u0060\u007B-\u00FF]/g, e => "&#" + ("000" + e.charCodeAt(0))
        .slice(-4) + ";")
    }

    if (empty) {
      document.getElementById('lite-chatbox').innerHTML = ""
      beforeRenderingHTML(JSON.parse(that.htmls), ".lite-chatbox")
    }else{
      beforeRenderingHTML(e, ".lite-chatbox")
    }
  }

  concat = d => {
    this.mybeforeRenderingHTML(d)
    this.setProps({'htmls':JSON.stringify(JSON.parse(this.htmls).concat(d))})
  }

  push = d => {
    let list = JSON.parse(this.htmls)
    list.push(d)
    this.setProps({'htmls':JSON.stringify(list)})
    this.mybeforeRenderingHTML('',true)
  }

  splice = (s,d) => {
    let list = JSON.parse(this.htmls)
    list.splice(s,0,d)
    this.setProps({'htmls':JSON.stringify(list)})
    this.mybeforeRenderingHTML('',true)
  }

  pop = () => {
    let list = JSON.parse(this.htmls)
    list.pop()
    this.setProps({'htmls':JSON.stringify(list)})
    this.mybeforeRenderingHTML('',true)
  }

  remove = s => {
    let list = JSON.parse(this.htmls)
    list.splice(s-1,1)
    this.setProps({'htmls':JSON.stringify(list)})
    this.mybeforeRenderingHTML('',true)
  }

  replace = (s,d) => {
    let list = JSON.parse(this.htmls)
    list.splice(s-1,1,d)
    this.setProps({'htmls':JSON.stringify(list)})
    this.mybeforeRenderingHTML('',true)
  }

  empty = () => {
    this.setProps({'htmls':JSON.stringify([])})
    this.mybeforeRenderingHTML('',true)
  }

  inquire = s => {
    return JSON.parse(this.htmls)[s-1]
  }

  length = () => {
    return JSON.parse(this.htmls).length
  }

  parseHtmls = () => {
    return JSON.parse(this.htmls)
  }

  scrollTo = s => {
    document.querySelector("#lite-chatbox").scrollTo({
      top: document.querySelector(`#lite-chatbox > div:nth-child(${s})`).offsetTop
    })
  }

  scrollToEnd = () => {
    let n = document.querySelector("#lite-chatbox")
    n.scrollTop = n.scrollHeight
  }

  fastRaw = (messageType,headIcon,name,html,position,htitleType,htitle,message) => ({messageType,headIcon,name,html,position,htitleType,htitle,message})
  fastTips = (messageType,html,message) => ({messageType,html,message})
  scrollTopNear = () => {
    const st = document.querySelector("#lite-chatbox").scrollTop
    let i
    for (i of document.querySelectorAll("#lite-chatbox > div")) {
      if (i.offsetTop > st) break
    }
    return +i.getAttribute('name')
  }
  scrollBottomNear = () => {
    const n = document.querySelector("#lite-chatbox")
    const st = n.scrollTop + n.clientHeight
    let i
    for (i of document.querySelectorAll("#lite-chatbox > div")) {
      if (i.offsetTop > st) break
    }
    return +i.getAttribute('name')
  }

  render() {
    if (this.darkPattern) document.querySelector("html").setAttribute('litewebchat-theme','dark')
    else document.querySelector("html").removeAttribute('litewebchat-theme')
    if (this.colorDown === 'transparent') this.colorDown = 'rgba(63, 143, 225, .8)'
    if (this.colorUp === 'transparent') this.colorUp = '#44d7c9'
    if (this.backgroundColor === 'transparent') this.backgroundColor = '#f8f9fa'

    return(
        React.createElement("div", {dangerouslySetInnerHTML: {__html: (`<div id="lite-chatbox" class="lite-chatbox" style="overflow:auto;height:${this.realHeight}px;width:${this.realWidth}px"></div><style>
        html {
          line-height: 1.15;
          -webkit-text-size-adjust: 100%
        }
        
        body {
          margin: 0
        }
        
        main {
          display: block
        }
        
        h1 {
          font-size: 2em;
          margin: .67em 0
        }
        
        hr {
          -webkit-box-sizing: content-box;
          box-sizing: content-box;
          height: 0;
          overflow: visible
        }
        
        pre {
          font-family: monospace, monospace;
          font-size: 1em
        }
        
        a {
          background-color: transparent
        }
        
        abbr[title] {
          border-bottom: none;
          text-decoration: underline;
          -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted
        }
        
        b,
        strong {
          font-weight: bolder
        }
        
        code,
        kbd,
        samp {
          font-family: monospace, monospace;
          font-size: 1em
        }
        
        small {
          font-size: 80%
        }
        
        sub,
        sup {
          font-size: 75%;
          line-height: 0;
          position: relative;
          vertical-align: baseline
        }
        
        sub {
          bottom: -.25em
        }
        
        sup {
          top: -.5em
        }
        
        img {
          border-style: none
        }
        
        button,
        input,
        optgroup,
        select,
        textarea {
          font-family: inherit;
          font-size: 100%;
          line-height: 1.15;
          margin: 0
        }
        
        button,
        input {
          overflow: visible
        }
        
        button,
        select {
          text-transform: none
        }
        
        [type=button],
        [type=reset],
        [type=submit],
        button {
          -webkit-appearance: button
        }
        
        [type=button]::-moz-focus-inner,
        [type=reset]::-moz-focus-inner,
        [type=submit]::-moz-focus-inner,
        button::-moz-focus-inner {
          border-style: none;
          padding: 0
        }
        
        [type=button]:-moz-focusring,
        [type=reset]:-moz-focusring,
        [type=submit]:-moz-focusring,
        button:-moz-focusring {
          outline: 1px dotted ButtonText
        }
        
        fieldset {
          padding: .35em .75em .625em
        }
        
        legend {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          color: inherit;
          display: table;
          max-width: 100%;
          padding: 0;
          white-space: normal
        }
        
        progress {
          vertical-align: baseline
        }
        
        textarea {
          overflow: auto
        }
        
        [type=checkbox],
        [type=radio] {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          padding: 0
        }
        
        [type=number]::-webkit-inner-spin-button,
        [type=number]::-webkit-outer-spin-button {
          height: auto
        }
        
        [type=search] {
          -webkit-appearance: textfield;
          outline-offset: -2px
        }
        
        [type=search]::-webkit-search-decoration {
          -webkit-appearance: none
        }
        
        ::-webkit-file-upload-button {
          -webkit-appearance: button;
          font: inherit
        }
        
        details {
          display: block
        }
        
        summary {
          display: list-item
        }
        
        template {
          display: none
        }
        
        [hidden] {
          display: none
        }
        
        * {
          scrollbar-color: #5c6163 rgba(56, 59, 60, .031372549)
        }
        
        ::-webkit-scrollbar {
          width: 7px;
          height: 1px
        }
        
        ::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background-color: rgba(144, 147, 153, .5);
          border: 0
        }
        
        [litewebchat-theme=dark] ::-webkit-scrollbar-thumb {
          background-color: rgba(84, 91, 95, .5)
        }
        
        ::-webkit-scrollbar-track {
          background: #fff;
          min-height: 50%;
          min-height: 20px
        }
        
        [litewebchat-theme=dark] ::-webkit-scrollbar-track {
          background: #181a1b
        }
        
        ::-webkit-scrollbar-corner {
          background-color: transparent
        }
        
        ::-moz-selection {
          background-color: #1963bd !important;
          color: #f8f6f3 !important
        }
        
        ::selection {
          background-color: #1963bd !important;
          color: #f8f6f3 !important
        }
        
        body {
          font-family: Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif
        }
        
        .lite-chatbox {
          scroll-behavior: smooth;
          padding: 0;
          width: 100%;
          position: relative;
          font-size: 18px;
          background-color: ${this.backgroundColor};
          overflow-y: auto;
          overflow-x: hidden
        }
        
        .lite-chatbox .tips {
          margin: 12px;
          text-align: center;
          font-size: 12px
        }
        
        .lite-chatbox .tips span {
          display: inline-block;
          padding: 4px;
          background-color: #ccc;
          color: #fff;
          border-radius: 6px
        }
        
        [litewebchat-theme=dark] .lite-chatbox .tips span {
          background-color: rgba(0, 0, 0, .3)
        }
        
        [litewebchat-theme=dark] .lite-chatbox .tips span {
          color: #bec5cc
        }
        
        .lite-chatbox .tips .tips-primary {
          background-color: #3986c8
        }
        
        [litewebchat-theme=dark] .lite-chatbox .tips .tips-primary {
          background-color: #447fb2
        }
        
        .lite-chatbox .tips .tips-success {
          background-color: #49b649
        }
        
        [litewebchat-theme=dark] .lite-chatbox .tips .tips-success {
          background-color: #66a651
        }
        
        .lite-chatbox .tips .tips-info {
          background-color: #5bb6d1
        }
        
        [litewebchat-theme=dark] .lite-chatbox .tips .tips-info {
          background-color: #3f889e
        }
        
        .lite-chatbox .tips .tips-warning {
          background-color: #eea948
        }
        
        [litewebchat-theme=dark] .lite-chatbox .tips .tips-warning {
          background-color: #af7728
        }
        
        .lite-chatbox .tips .tips-danger {
          background-color: #e24d48
        }
        
        [litewebchat-theme=dark] .lite-chatbox .tips .tips-danger {
          background-color: #ad3531
        }
        
        [litewebchat-theme=dark] .lite-chatbox {
          background-color: #131415}
        }
        
        .lite-chatbox .cmsg {
          position: relative;
          margin: 4px 7px;
          min-height: 50px;
          border: 0
        }
        
        .lite-chatbox .cright {
          text-align: right;
          margin-left: 64px
        }
        
        .lite-chatbox .cright img.headIcon {
          right: 0
        }
        
        .lite-chatbox .cright .name {
          margin: 0 48px 2px 0
        }
        
        .lite-chatbox .cright .content {
          margin: 0 48px 0 0;
          border-radius: 20px 0 20px 20px;
          color: #fff;
          background: -o-linear-gradient(70deg, ${this.colorDown} 0, ${this.colorUp} 100%);
          background: linear-gradient(20deg, ${this.colorDown} 0, ${this.colorUp} 100%);
          -webkit-box-shadow: 5px 5px 15px 0 rgba(102, 102, 102, .15);
          box-shadow: 5px 5px 15px 0 rgba(102, 102, 102, .15)
        }
        
        [litewebchat-theme=dark] .lite-chatbox .cright .content {
          background: -o-linear-gradient(70deg, ${this.colorDown} 0, #${this.colorUp} 100%);
          background: linear-gradient(20deg, ${this.colorDown} 0, #${this.colorUp} 100%)
        }
        
        .lite-chatbox .cright .content::after {
          left: -12px;
          top: 8px
        }
        
        .lite-chatbox .cleft {
          text-align: left;
          margin-right: 64px
        }
        
        .lite-chatbox .cleft img.headIcon {
          left: 0
        }
        
        .lite-chatbox .cleft .name {
          margin: 0 0 2px 48px
        }
        
        .lite-chatbox .cleft .content {
          margin: 0 0 0 48px;
          border-radius: 0 20px 20px 20px;
          background: #fff;
          color: #373737;
          border: 1px solid rgba(0, 0, 0, .05);
          -webkit-box-shadow: 5px 5px 15px 0 rgba(102, 102, 102, .1);
          box-shadow: 5px 5px 15px 0 rgba(102, 102, 102, .1)
        }
        
        [litewebchat-theme=dark] .lite-chatbox .cleft .content {
          background: #22242a
        }
        
        [litewebchat-theme=dark] .lite-chatbox .cleft .content {
          color: #d4d4d4
        }
        
        .lite-chatbox .cleft .content::after {
          left: -12px;
          top: 8px
        }
        
        .lite-chatbox img.headIcon {
          width: 34px;
          height: 34px;
          top: 9px;
          position: absolute
        }
        
        .lite-chatbox img.radius {
          border-radius: 50%
        }
        
        .lite-chatbox .name {
          color: #8b8b8b;
          font-size: 12px;
          display: block;
          line-height: 18px
        }
        
        .lite-chatbox .name>span {
          vertical-align: middle
        }
        
        .lite-chatbox .name .htitle {
          display: inline-block;
          padding: 0 3px 0 3px;
          background-color: #ccc;
          color: #fff;
          border-radius: 4px;
          margin-right: 4px;
          font-size: 11px;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: middle;
          max-width: 50px
        }
        
        [litewebchat-theme=dark] .lite-chatbox .name .htitle {
          background-color: #4c5052
        }
        
        .lite-chatbox .name .htitle.admin {
          background-color: #72d6a0
        }
        
        [litewebchat-theme=dark] .lite-chatbox .name .htitle.admin {
          background-color: #3c916e
        }
        
        .lite-chatbox .name .htitle.owner {
          background-color: #f2bf25
        }
        
        [litewebchat-theme=dark] .lite-chatbox .name .htitle.owner {
          background-color: #9a7c21
        }
        
        .lite-chatbox .content {
          word-break: break-all;
          word-wrap: break-word;
          text-align: left;
          position: relative;
          display: inline-block;
          font-size: 15px;
          padding: 10px 15px;
          line-height: 20px;
          white-space: pre-wrap;
          min-width: 9px;
          min-height: 18px;
        }
        
        .lite-chatbox .content img {
          width: 100%;
          height: auto
        }
        
        .lite-chatbox .content a {
          color: #0072c1;
          margin: 0 5px;
          cursor: hand
        }
        
        [litewebchat-theme=dark] .lite-chatbox .content a {
          color: #00c3ff
        }
        

        </style>`)}}, null)
    )
  }
}


exports.types = types
exports.widget = Widget